<template>
  <div>
    <div style="text-align: center; font-size: 40px; margin-bottom: 10px">
      精品内容
    </div>
    <div style="text-align: center; margin-bottom: 20px">
      从入门到工业实践, 快速提升深度学习技术能力
    </div>
    <el-row>
      <el-col :span="4">&nbsp;</el-col>
      <el-col :span="16">
        <el-row :gutter="20">
          <el-col
            :span="8"
            v-for="cardTitle in cardTitles"
            :key="cardTitle.name"
          >
            <el-card class="box-card">
              <div class="clearfix" style="padding-bottom: 20px">
                <span :style="{ color: cardTitle.color }">{{
                  cardTitle.name
                }}</span>
                <el-button style="float: right; padding: 3px 0" type="text"
                  ><i class="el-icon-right"></i
                ></el-button>
              </div>
              <div
                style="margin-bottom: 20px"
                v-for="item in cardTitle.items"
                :key="item.title"
                class="text item"
              >
                <div>
                  <el-row :gutter="20">
                        <el-col :span="12">{{ item.title }}</el-col>
                        <el-col :span="12"><el-tag>{{item.type}}</el-tag></el-col>
                    </el-row>
                </div>
                <div>
                  <el-row>
                    <el-col :span="8"
                      ><i class="el-icon-view"></i>{{ item.look }}
                    </el-col>
                    <el-col :span="8"
                      ><i class="el-icon-share"></i>{{ item.send }}
                    </el-col>
                    <el-col :span="8"
                      ><i class="el-icon-star-off"></i>{{ item.zan }}</el-col
                    >
                  </el-row>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="4">&nbsp;</el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cardTitles: [
        {
          name: "入门类",
          color: "#34acfa",
          items: [
            {
              title: "PaddleHub教程合集",
              type: "初级",
              look: "9.9K",
              send: "9.9K",
              zan: "9.9K",
            },
            {
              title: "PaddleRec在线运行项目合集",
              type: "初级",
              look: "9.9K",
              send: "9.9K",
              zan: "9.9K",
            },
            {
              title: "告别电影荒，手把手教你训练符合自...",
              type: "初级",
              look: "9.9K",
              send: "9.9K",
              zan: "9.9K",
            },
          ],
        },
        {
          name: "进阶类",
          color: "#2067ff",
          items: [
            {
              title: "【PaddleHelix】螺旋桨生物计算开源工具集",
              type: "中级",
              look: "9.9K",
              send: "9.9K",
              zan: "9.9K",
            },
            {
              title: "基于Paddle的肝脏CT影像分割",
              type: "中级",
              look: "9.9K",
              send: "9.9K",
              zan: "9.9K",
            },
            {
              title: "PaddlePaddle分布式推荐算法实践",
              type: "中级",
              look: "9.9K",
              send: "9.9K",
              zan: "9.9K",
            },
          ],
        },
        {
          name: "高级类",
          color: "#2932e1",
          items: [
            {
              title: "AnimeGAN动漫化模型一键应用（含动漫化小程序体验）",
              type: "高级",
              look: "9.9K",
              send: "9.9K",
              zan: "9.9K",
            },
            {
              title: "深度学习进阶CV-目标检测",
              type: "高级",
              look: "9.9K",
              send: "9.9K",
              zan: "9.9K",
            },
            {
              title: "基于PaddlePaddle的微博谣言检测",
              type: "高级",
              look: "9.9K",
              send: "9.9K",
              zan: "9.9K",
            },
          ],
        },
      ],
    };
  },
};
</script>

<style>
</style>